<template>
	<div class="ffffff mainpadding radius margin_top">
		<div class="text_h color_three">请选择充值金额：</div>
		<div class="flexleft flex_wrap">
			<div class="width15 margin_top2" v-for="item in 8">
				<div class="noActive">35元</div>
			</div>
			<div class="width20 margin_top2">
				<!-- <div class="noActive">自定义金额</div> -->
				<el-input v-model="input" placeholder="自定义金额"></el-input>
			</div>
		</div>
		<div class="text_h color_three margin_top">支付方式：</div>
		<div class="payBtn flexcenter margin_top2">
			<img class="margin_right1" src="../../../static/image/home/weixinPay.png" alt="">
			<div>微信支付</div>
		</div>
		<div class="flexleft margin_top5">
			<div class="themeBtnbr margin_right1">立即支付</div>
			<div class="themeBtnbrSmall" @click="goRecord">充值记录</div>
		</div>
		<!-- 默认没有二维码点击立即支付支付按钮之后 按钮隐藏 二维码展示 -->
		<div class="flexcenter">
			<div class="textcenter">
				<div class="text_b color_six">
					<span>应付金额</span>
					<span class="text_f color_red">5</span>
					<span>元</span>
				</div>
				<div class="text_b color_six margin_top1">请使用微信扫码支付</div>
				<div class="flexcenter margin_top1">
					<div class="codeImg">
						<img src="../../../static/image/course.png" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				input: ""
			}
		},
		methods:{
			goRecord(){ //充值记录
				this.$router.push({
					path:"/mine/mineBalance",
					query:{
						name:"充值记录"
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.width15 {
		width: 15%;
		display: flex;
		justify-content: center;
	}

	.width20 {
		width: 17%;
		display: flex;
		justify-content: center;
	}

	.noActive {
		padding: 15px 25px;
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #EAEAEA;
		font-size: 16px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #666666;
	}

	.active {
		padding: 15px 25px;
		background: rgba(52, 120, 245, 0.1);
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #3478F5;
		font-size: 16px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #3478F5;
	}

	::v-deep .el-input {
		width: 100px;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		text-align: center;

		.el-input__inner {
			height: 50px;
		}
	}

	.payBtn {
		width: 141px;
		height: 46px;
		// text-align: center;
		// line-height: 46px;
		// padding: 15px 20px;
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #3478F5;
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		img{
			width: 20px;
			height: 18px;
		}
	}
	.codeImg{
		width: 135px;
		height: 134px;
		img{
			width: 100%;
			height: 100%;
		}
	}
</style>